<template>
  <div class="doctor-patients">
    <div class="dashboard-header">
      <h2>患者管理</h2>
      <div class="header-actions">
        <el-input
          v-model="searchQuery"
          placeholder="搜索患者"
          class="search-input"
          size="large"
        >
          <template #append>
            <el-button type="primary" icon="Search">搜索</el-button>
          </template>
        </el-input>
        <el-button type="primary" icon="Plus">添加新患者</el-button>
      </div>
    </div>
    
    <el-table :data="patients" style="width: 100%" stripe>
      <el-table-column prop="name" label="姓名" width="120" sortable />
      <el-table-column prop="age" label="年龄" width="100" />
      <el-table-column prop="gender" label="性别" width="100" />
      <el-table-column prop="phone" label="联系方式" width="150" />
      <el-table-column prop="lastVisit" label="最近就诊时间" width="180" sortable />
      <el-table-column prop="diagnosis" label="主要诊断" />
      <el-table-column prop="records" label="病历数" width="120" align="center">
        <template #default="scope">
          <el-tag type="info">{{ scope.row.records }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" icon="Edit" @click="editPatient(scope.row)">详情</el-button>
          <el-button type="danger" size="small" icon="Delete" @click="transferPatient(scope.row)">转诊</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next, jumper, sizes, total"
        background
      />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const searchQuery = ref('')
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(50)
    
    const patients = ref([
      { name: '张明', age: 45, gender: '男', phone: '13800138000', lastVisit: '2023-07-21 10:30', diagnosis: '高血压', records: 5 },
      { name: '李红', age: 32, gender: '女', phone: '13900139000', lastVisit: '2023-07-20 14:15', diagnosis: '糖尿病', records: 8 },
      { name: '王建国', age: 65, gender: '男', phone: '13700137000', lastVisit: '2023-07-19 09:45', diagnosis: '冠心病', records: 12 },
      { name: '刘静', age: 28, gender: '女', phone: '13600136000', lastVisit: '2023-07-18 16:20', diagnosis: '哮喘', records: 3 },
      { name: '陈晓', age: 50, gender: '男', phone: '13500135000', lastVisit: '2023-07-17 11:10', diagnosis: '慢性胃炎', records: 6 }
    ])
    
    const editPatient = (patient) => console.log('编辑患者:', patient)
    const transferPatient = (patient) => console.log('转诊患者:', patient)
    
    return {
      searchQuery,
      currentPage,
      pageSize,
      total,
      patients,
      editPatient,
      transferPatient
    }
  }
}
</script>

<style scoped>
.doctor-patients {
  padding: 20px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>